<template>
	<view class="qRCodePaymentPage">
		<!-- 头像信息 -->
		<view class="headformation flex-between" >
			<view class="flex" @click="improveInformationFn">
				<image class="avater" :src="userinfos.avatar" mode=""></image>
				<view v-if="userinfos" style="margin-left: 10rpx; " class="flex-column-start">
					<view style="color: #000;font-size: 32rpx;margin-bottom: 8rpx;">
					    {{userinfos.nickname}}
					</view>
					<view class="memberType flex">
						{{userinfos.level_name}}
					</view>
				</view>
			</view>
			<!-- <view class="membershipCode flex">

				<view style="color: #000;">
					分享赠送

				</view>
				<view class="margin-left_10rpx">
					<image class="icon" src="../../static/会员卡首页1/path (5).png" mode=""></image>
				</view>
			</view> -->
		<!-- 	<view class="membershipCode flex">
			
				<view style="color: #000;" @click="generateBarcode()">
					{{!isGenerateBarcode?'生成pc码':'生成二维码'}}
			
				</view>
		
			</view> -->

		</view>
		
		<view class="qrcodeCard flex">
		<!-- 	<view class="flex-column " v-if="isGenerateBarcode">
				<view class="margin-bottom_80rpx font36">
					请用扫码枪扫码进行余额抵扣
				</view>
				
				<uqrcode class="qrcode" ref="qrcode" canvas-id="qrcode" :value="val" size="200"></uqrcode>
				  <template v-slot:loading>
				    <text style="color: green;">loading...</text>
				  </template>
				</uqrcode>
		
			</view> -->
			<view class="flex-column "  >
				<view class="margin-bottom_80rpx font36">
					请扫码进行余额抵扣
				</view>	
				<uqrcode class="qrcode" ref="qrcode" canvas-id="qrcode" :value="val" size="200"></uqrcode>
				  <template v-slot:loading>
				    <text style="color: green;">loading...</text>
				  </template>
				</uqrcode>
			</view>
			<!-- <image v-else class="qrcode" src="../../static/会员卡商城加套餐卡/矩形 171.png" mode=""></image> -->
		</view>
		<view class="circularCard">
			<!-- 二个半圆 -->
			<view class="circular-left">
				
			</view>
			<view class="circular-right">
				
			</view>
			<view class="flex-around dataDetails">
				<view class="flex-column" v-for="(item,i) in dataDetails" :key="i">
					<view style="color: rgb(51, 51, 51);font-size: 36rpx;">
						{{totelName(item.number)}}
					</view>
					<view style="color: rgb(102, 102, 102);">
						{{item.text}}
					</view>
				</view>
			
			</view>
		
		</view>
		<view class="margin-top_40rpx">
			<image class="step" src="../../static/会员卡yi/微信图片_20240524195101.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	export default {
		components: {
             tkiBarcode
		},
		data() {
			return {
				code:'',
				// 是否生成条形码
				isGenerateBarcode:false,
				token: uni.getStorageSync('login').token,
				tabIndex: 4,
				val:'130735045474964416',
				// 数据明细
				dataDetails: [{
						number: 3.00,
						text: '套餐卡'
					},
					{
						number: 3.00,
						text: '优惠券'
					},
					{
						number: 18000,
						text: '我的余额'
					},
					{
						number: 1568,
						text: '我的积分'
					},
				],
				userinfos:'',
			}
		},
		onLoad() {
              this.init()
			
		},
		
		computed: {
			totelName: function() {
				return function(num) {
		
					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
		methods: {
			// 生成条形码
			generateBarcode(){
				this.isGenerateBarcode=!this.isGenerateBarcode
				this.init()
			},
              // 获取用户信息
              
              async init(){
				 
				  const ress = await this.$http.post({
				  	url: this.$api.userinfo,
				  	data: {
				  		id: uni.getStorageSync('userId'),
				  		
				  	},
				  	headers: {
				  		'Authorization': `Bearer ${this.token}`
				  	}
				  			
				  })
				  			
				  if (ress.code == 0) {
				  
				  			
				  			
				  			
				    this.val=ress.data.random_code
				  	this.userinfos = ress.data
					console.log(this.userinfos)
					this.dataDetails.forEach((item) => {
						switch (item.text) {
							case '我的余额':
								item.number = ress.data.balance;
								break;
							case '优惠券':
								item.number = ress.data.coupon_num;
								break;
							case '套餐卡':
								item.number = ress.data.package_num;
								break;
							case '我的积分':
								item.number = ress.data.surplus_integral?ress.data.surplus_integral:ress.data.integral;
									break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})
				  	   this.code= window.location?.origin+'/H5/gongzhManagement.html#/pages/cashierSystem/cashierDeduction/cashierDeduction?uid=' + this.userinfos.id

				  			
				  } else {
				  			
				  	this.$sun.toast(ress.msg, 'none')
				  }
			  }
		}
	}
</script>

<style lang="less" scoped>
	.qRCodePaymentPage {
		padding: 50rpx 30rpx;

		.qrcodeCard {
			padding: 32rpx;
			height: 343px;
			
			background: #fff;
			.qrcode {
				// width: 307px;
				height: 307px;
			}
		}
		.step{
			
			height: 272rpx;
		}
		.circularCard{
			padding: 50rpx;
			overflow: hidden;
			height: 99px;
			background: rgb(248, 248, 248);
			position: relative;
			.circular-left{
				position: absolute;
				width: 27px;
				height: 27px;
				left:-25rpx;
				top:50%;
				transform: translate(0, -50%);
				border-radius: 50%;
				background: rgb(255, 243, 218);
			}
			.circular-right{
				position: absolute;
				width: 27px;
				height: 27px;
				right:-25rpx;
				top:50%;
				transform: translate(0, -50%);
				border-radius: 50%;
				background: rgb(255, 243, 218);
			}
		}


		.headformation {
			margin-bottom: 32rpx;

			.avater {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.icon {
				width: 22.54rpx;
				height: 21.86rpx;
			}

			.memberType {
				/* 矩形 1043 */
				color: rgb(186, 128, 0);
				font-family: 思源黑体;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 12rpx;
				width: 112rpx;
				height: 36rpx;
				background-color: #FFDC8F;
			}

			.membershipCode {
				width: 164rpx;
				height: 50rpx;
				background: rgb(255, 255, 255);

				.codeImage {

					width: 48rpx;
					height: 48rpx;
				}
			}
		}

	}

	page {
		background: #fff3da;
	}
</style>